@use '../../../css/mixins/components';

/**
 * Tabs
 */

.tabs {
    position: relative;
    display: block;

    .tabs-header {
        @include components.background('tabs', 'header', true);
        @include components.border-radius('tabs', 'header', true);
        @include components.border-color('tabs', 'header', true);
        @include components.border-style('tabs', 'header', true);
        @include components.border-width('tabs', 'header', true);
        @include components.color('tabs', 'header', true);
        @include components.font-size('tabs', 'header', true);
        @include components.margin('tabs', 'header');

        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: center;
        overflow: auto;
    }

    &.-stretch {
        .tabs-header {
            .tab-title {
                flex-grow: 1;
            }
        }
    }
}
